<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Relative</title>
    <style>
        .relative1 {
            position: relative;
            background-color: blue;
        }
        .relative2 {
            position: relative;
            top: -20px;
            left: 20px;
            background-color: bisque;
            width: 500px;
        }
    </style>
</head>
<body>
<div class="relative1">relative 表现的和 static 一样，除非你添加了一些额外的属性。</div>
<div class="relative2">
    在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。
    其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。
</div>
</body>
</html>